<template>
  <div class="box">
    <div class="body">
      <el-row>
        <el-col :span="8" class="el_colright">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-edit" @click="addMenu"
              >添加菜单</el-button>
          </div></el-col>
      </el-row>

     <template>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="table"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :default-expand-all="isshow"
      :cell-class-name="addStyle"
      >
      <el-table-column
        prop="title"
        label="标题"
        width="200"
        >
         <template #default="{ row }">
         <i
           :class="{

             'el-icon-document-remove': !row.children,       // 节点收缩时的图标
             'el-icon-folder-opened': row.children, // 节点展开时的图标
             'el-icon-view':row.is_point   // data.type是后端配合提供的识别字段，最后一级
           }"
           style="color: #409eff;"
         />
         <span>{{row.title}}</span>
            </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="权限点代码"
        class="column_center">
      </el-table-column>
      <el-table-column label="操作"  width="120">
            <template #default="{ row }">
              <div v-if="row.id !== 2 && row.id !== 4">
                <i class="el-icon-edit" @click="editMenu(row.id)" ></i>
                <i class="el-icon-delete" @click="removeMenu(row.id)" ></i>
              </div>
            </template>
          </el-table-column>
    </el-table>
    <menuAdd  ref="menu" :text="text" :pageTitle="pageTitle" :PermissionGroupsList="PermissionGroupsList" @getMenuList="getMenuList" @handleCloseModal="handleCloseModal"  />
  </template>

    </div>

  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import menuAdd from '@/module-manage/components/menu-add'
import { convertKey } from '@/utils/doData.js'
export default {
  components: {
    menuAdd
  },
  data () {
    return {
      tableData: [
      ],
      defaultProps: {
        children: 'children',
        title: 'title'
      },
      text: '',
      pageTitle: '',
      PermissionGroupsList: {},
      isshow: true
    }
  },

  created () {
    this.getMenuList()
  },

  methods: {
    async getMenuList () {
      const { data } = await list()
      convertKey(data)
      this.tableData = data
    },
    addMenu () {
      this.text = '创建'
      this.pageTitle = '菜单'
      this.$refs.menu.handleResetForm()
      this.$refs.menu.dialogFormV()
    },

    addStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return 'deffCell'
      }
    },
    editMenu (id) {
      this.text = '编辑'
      this.pageTitle = '菜单'
      this.$refs.menu.hanldeEditForm(id)
      this.$refs.menu.dialogFormV()
    },
    handleCloseModal () {
      this.$refs.menu.dialogFormH()
      this.getMenuList()
    },
    async removeMenu (id) {
      await remove({ id })
      this.getMenuList()
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
.el-row {
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el_colright{
  display: flex;
  justify-content: end;
  button{
    background-color: #67c23a;
    font-size: 12px;
  }
}
.has-gutter{
 /deep/ .is-leaf{
    background-color: #ccc;
  }
}
.el-icon-edit {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
  line-height: 37px;
  text-align: center;
}
.el-icon-delete {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #fef0f0;
  color: #f56c6c;
  line-height: 37px;
  text-align: center;
}
.table{
  display: flex;
  flex-direction: column;
 /deep/ .el-table__header-wrapper{
    background-color: #ccc;
  }
 /deep/ .el-table_1_column_3{
  text-align: center;
  }

.column_center{
  flex:1
}
}

// .el-tree /deep/ .el-tree-node__expand-icon.expanded
// {
//     -webkit-transform: rotate(0deg);
//     transform: rotate(0deg);
// }
// //有子节点 且未展开
// .el-table/deep/ .el-icon-arrow-right:before {
//   content: '\e723';
//   display: block;
//   width: 16px;
//   height: 16px;
//   font-size: 16px;
//   background-size: 16px;
// }
// //有子节点 且已展开
// .el-table/deep/ .el-table__expand-icon--expanded {
//   .el-icon-arrow-right:before {
//     content: '\e789';
//     display: block;
//     width: 15px;
//     height: 20px;
//     font-size: 18px;
//     background-size: 21px;
//   }
// }
// //没有子节点
// .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
// .el-table /deep/.el-table__placeholder::before {
//   content: '\e789';
//   display: block;
//   width: 16px;
//   height: 18px;
//   font-size: 16px;
//   background-size: 16px;
// }

// table加上图标
::v-deep .el-tooltip {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 原本样式的图标点击后会有90°的旋转，此样式把旋转取消。 */
::v-deep .el-table__expand-icon--expanded {
  transform: rotate(0deg);
}

::v-deep .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  // width: 30px;
  height: 30px;
  // margin-right: 10px;
  .el-icon-arrow-right {
    margin-top: 5px;
  }
}

/* 有子节点 且未展开 */
.el-table ::v-deep .el-icon-arrow-right::before {
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  /* 原本content是一个图标，置为空 */
  content: "";
  display: block;
  // width: 32px;
  height: 19px;
  // background-size: 15px, 18px;
}

/* 有子节点 且已展开 */
::v-deep .el-table__expand-icon--expanded {
  .el-icon-arrow-right::before {
    background-repeat: no-repeat, no-repeat;
    // background-position: left bottom, right bottom;
    content: "";
    display: block;
    // width: 36px;
    height: 19px;
    // background-size: 15px 18px;
  }
}

::v-deep .el-table__placeholder {
  width: 24px !important;
}
::v-deep .el-table__placeholder::before {
  content: "";
  display: block;
  // width: 30px;
  height: 25px;
  font-size: 15px;
  // background-size: 22px;
  margin-right: 10px;
}

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:first-child {
    padding-left: 24px !important;
  }
}
</style>
